import React, { useEffect } from 'react'
import { Button, SearchBar, Space, Toast } from 'antd-mobile'
import { useState } from 'react'
import axios from 'axios'
import Item from 'antd-mobile/es/components/dropdown/item'
import { useNavigate } from 'react-router-dom'
export default function Yi() {
  const [list, setList] =useState([
    1,23,4,4,5
  ])
  const [list1,setlist1]=useState([

  ])
  const getlist=async()=>{
    let {data}=await axios.get('http://localhost:3000/getrun')
    setlist1(data.list)
  }
  useEffect(()=>{
    getlist()
  },[])
  const Navigate=useNavigate()
  return (
    <div>
        <p><SearchBar placeholder='搜索一起跑关键字' /></p>
          <img  onClick={()=>{
            console.log(list1)
          }} src='https://cdn7.axureshop.com/demo2024/2268035/images/%E4%B8%80%E8%B5%B7%E8%B7%91/u598.svg'
          
          style={{width:'98%',marginTop:'10px',marginLeft:'3px',borderRadius:'10px'}}></img>
          <p >
            
            <span style={{fontSize:'17px',fontWeight:'bold'}}>附近约炮</span>
            <span style={{color:'gray',fontSize:'11px',float:'right',marginTop:'5px'}}>全部约炮&gt;</span>
            </p>
            
{list1.map(item=>{
  return  <div style={{marginTop:'10px'}} onClick={()=>{
    Navigate(`/app/qidan/${item._id}`)
  }}>  
  <div style={{width:'360px',borderRadius:'10px',height:'200px',position:'relative',backgroundRepeat:'no-repeat',
    backgroundImage:"url("+item.img+")",backgroundSize:'100% 100%'
    ,marginLeft:'7px'}}>
    <span style={{backgroundColor:'rgb(236,128,141)',borderRadius:'5px'
  
      ,color:'white',padding:'5px',right:'0px',position:'absolute'
    }}>约跑中</span>
   </div>
   
   <div style={{marginLeft:'7px'}}>
                <p style={{fontWeight:'bold'}}>{item.test}</p>
                <p style={{color:'gray',fontSize:'13px'}}>{item.name} 来自:{item.address}</p>
                </div>
    </div>
})}








              <div style={{color:'white',borderRadius:'50%',width:'36px',height:'40px',textAlign:'center',position:'fixed'
  ,bottom:'70px',right:'30px',padding:'5px',backgroundColor:'rgb(36,200,116)'

              }} onClick={()=>{
                Navigate("/tiany")
              }}>发起约跑</div>
    </div>
  )
}
